<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>jQuery Mobile Bootstrap Theme</title>
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
		<link rel="stylesheet" href="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.min.css" />
		<link rel="stylesheet" href="../themes/Bootstrap.css" />
		<link rel="stylesheet" href="../themes/jquery.mobile.icons.min.css" />
		<link rel="stylesheet" href="../stylesheets/style.css" />
		<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
		<script type="text/javascript" src="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.core.min.js"></script>
    	<script type="text/javascript" src="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.mode.calbox.min.js"></script>
    	<script type="text/javascript" src="../js/jquery.blockUI.js"></script>
    	<script type="text/javascript">
    	
    		var data = {};
			
			var nowdate = '';
		    $(document).ready(function(){
		    	
		    	initData();
				getList();
			
				$('#search').click(function() {
					setData();
					getList();
				});
			});
			
			function initData() {
				
				data.type = 'invs';
				data.stock_cd =	$("#stock_cd").val(); 
				data.fromDT =  $("#stock_date").val();
				data.toDT = $("#stock_date").val();
			}
			
			function setData() {
				data = {};
				data.type = 'invs';
				data.stock_cd =	$("#stock_cd").val();
				data.fromDT = $('#fromDT').val().replace(/-/gi,"");
				data.toDT = $('#toDT').val().replace(/-/gi,"");
			} 
			
			function getList() {
			
				$.ajax({
				type: 'POST',
				url: '/search',
				data: JSON.stringify(data),
				dataType : "json", 
				contentType: 'application/json',
				beforeSend: function () {
			            $.blockUI({ 
			                message: '<img src="../themes/images/ajax-loader.gif" width="50" height="50"/>',
			                css: { 
			                    top:  ($(window).height() - 100) /2 + 'px', 
			                    left: ($(window).width() - 100) /2 + 'px',
			                    color:      '',
			                    border:     '',
			                    backgroundColor:'',                     
			                    width: '100px' 
			                }                
			                
			            }); 
			     },
				success : function(data){ // 성공시 data값.
				
					$.unblockUI(); 
					var newRows = '';
					
					if($.isArray(data) && data.length > 0  ){ //배열확인
						
						$.each(data,function(i){//loop
							newRows += '<tr>';
							newRows += '<td align="left"><a href="#empty-anchor" onclick="javascript:goDetail(\''+data[i].investor_type+'\', \'' +  data[i].investor + ' \'   );"  data-rel="external">'+data[i].investor+'</a></td>';
             				newRows += '<td align="right">'+data[i].buy_volum+'</td>';
             				newRows += '<td align="right">'+data[i].sell_volum+'</td>';
             				newRows += '<td align="right">'+data[i].purcha_volum+'</td>';
             				newRows += '</tr>';
						});
						
					} else {
						   newRows += '<tr>';
						   newRows += '<td colspan="4">데이타가 없습니다.</td>';
						   newRows += '</tr>';
					}
					
					$('#mytable tbody').empty()
							 .append( newRows )
							 .closest( "#mytable" )
		           			 .table("refresh" )
		                	 .trigger( "create" );
					
				},
			    error : function(request, status, error) {
			    
				 //통신 에러 발생시 처리
					alert("code : " + request.status + "\r\nmessage : " + request.reponseText +" \r\n error : " + error);
					$.unblockUI(); 
					}
				});
			}
			
			function goDetail(investor_type,investor){
				$("#investor_type").val(investor_type);
				$("#form").attr('action','/analysis').submit();
			}
						
		</script>
    
   </head>
	<body>
		<div data-role="page" data-theme="a">
			<div data-role="header" data-position="inline">
					<h1>종목 투자자 거래현황</h1>
				<a href="/"  class="ui-btn-right" data-icon="home" target="_self">Home</a>
			</div>
			<div data-role="content" data-theme="a">
				
				<div id="stockInfo">
					<h1>
						<P><center><%=stock_nm%></center></P>
					</h1>
				<ul>
					<li> 종가 : <%=closing_price%> 원</li>
					<li> 거래량 : <%=trading_volum%> 주</li>
					<li>
				<% if(contrast == '2') { %>
               		전일대비 : <em class='up'><img src="/images/bigup.gif"/> <%=contvalue%></em> (<em class='up'><%=fluctuation_rate%></em>%)
				<% } else if(contrast == '1') { %>
					전일대비 : <em class='up'><img src="/images/up.gif" /> <%=contvalue%></em> (<em class='up'><%=fluctuation_rate%></em>%)
				<% } else if(contrast == '0') { %>
					전일대비 : <em><img  src="/images/none.gif" /> 0</em> (<em>0</em>%)
				<% } else if(contrast == '-1') { %>
					전일대비 : <em class='down'><img src="/images/down.gif" /> <%=contvalue%></em> (<em class='down'><%=fluctuation_rate%></em>%)
				<% } else if(contrast == '-2') { %>
					전일대비 : <em class='down'><img src="/images/bigdown.gif" /> <%=contvalue%></em> (<em class='down'><%=fluctuation_rate%></em>%)
				<% } %>
					</li>	
					<li> 총발행 주식 : <%=listed_stocks%> 주</li>
					<li> 기준일  : <%=s_date%></li>
				</ul>
			</div>
		
		  <table id="mytable" data-role="table" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="a" data-column-btn-text="항목 선택" data-column-popup-theme="a">
	         <thead>
	           <tr class="ui-bar-a" >
	             <th>투자</th>
	             <th data-priority="4">매수</th>
	             <th data-priority="3">매도</th>
	             <th data-priority="1"><abbr title="순매수">순매수</abbr></th>
	           </tr>
	         </thead>
	         <tbody>
	         </tbody>
	        </table>
			</div>
	      	<div data-role="footer" data-theme="a">
				<center> Copyright © 2015 UpDiosSystems Ins. </center> 
			</div> 
		</div>
		
		<form id="form" name="form" method="post" target="_self" action="">
			<input type="hidden" id="stock_cd" name="stock_cd" value="<%= stock_cd %>" />
			<input type="hidden" id="stock_date" name="stock_date" value="<%= stock_date %>" />
			<input type="hidden" id="investor_type" name="investor_type" value="" />
			<input type="hidden" id="investor" name="investor" value="" />
			<input type="hidden" id="path" name="path" value="<%=path%>" />
		</form>
	</body>
</html>